<template>
<!-- 申请提现 -->
	<div class="w750">
		<!-- 提现 -->
		<div :class="themes.theme"> 
			<div class="withdraw">
				<div class="withdraw-con" v-if="getStep">
					<div class="arriveAccount">
						<div class="arrive-top">
							<div class="arrive-top-left" >到账账户</div>
							<div class="arrive-top-right" @click="goChooseAccount">
								
								<span class="right-text" v-if="accountMessage.defaultAccountType">
									<!-- <img src="" /> -->
									{{accountMessage.defaultAccountType == 'BANK_CARD' ? accountMessage.bankName : accountMessage.weChatName ? accountMessage.weChatName : '微信钱包'}} <template v-if="accountMessage.defaultAccountType == 'BANK_CARD'">(尾号 {{accountMessage.bankCardNumber | strEndFour}})</template> 
								</span>
								<span class="right-text" v-else>请添加</span>
								<div class="arr">
									<img src="@/assets/images/arrow.png" alt="" />
								</div>
							</div>
						</div>
						<div class="arrive-bottom" v-if="accountMessage.defaultAccountType"> {{accountMessage.defaultAccountType == 'BANK_CARD' ? '发起提现需1-3个工作日到账' : '发起提现需核实微信账户，3-5个工作日到账'}}</div> 
					</div>
				</div>


                <div class="integral-content">
                    <div class="item">
                        <div class="entry-name">可提现{{integralName}}</div>
                        <div class="entry-txt">{{accountMessage.withdrawableIntegral}}</div> 
                    </div>

                    <div class="item">
                        <div class="entry-name">提现</div>
                        <div class="entry-content">
                            <div class="input-box">
                                <input type="number" v-Int :placeholder="'请输入要提现的'+integralName"  class="input-text" autocomplete="off" v-model="inputNumber" v-on:input="inputWithdrawal" />
                                <span class="text-all" @click="allGet">全部提现</span>
                            </div>
                        </div> 
                    </div>

                    <div class="item">
                        <div class="desc-content">
                            <div class="desc-item">1.兑换率，{{accountMessage.eachWithdrawIntegral || 0}}{{integralName}}={{accountMessage.withdrawRMB || 0}}元现金</div>
                            <div class="desc-item">2.需要额外手续费， 费率{{accountMessage.withdrawServiceFeeRate || 0}}%</div>
                        </div>
                    </div>

                    

                    <div class="item">
                        <div class="entry-name">提现手续费</div>
                        <div class="entry-span">{{accountMessage.poundage || 0}} {{integralName}}</div> 
                    </div>

                    <div class="item">
                        <div class="entry-name">兑现金额</div>
                        <div class="entry-span">{{accountMessage.cash || 0}} 元</div> 
                    </div>
                    
                </div>
				
				<div class='b-btn' @click="applyWithward" v-if="getStep">
					<span class="btn-a btn-r" :class="disabled ? 'btn-r': 'disabled' ">确认提现</span>
				</div>
				
			</div>
		</div>
	</div>
</template>

<script>
let Decimal = require('decimal.js');
import {mapState} from 'vuex'
import cash from "utils/tool";
import { debounce } from 'utils/utils';
import { integralWithdraw,submitWithdrawApply} from 'api/extensionApi';
export default {
	data () {
		return {
            disabled: false,
      		Money: cash, //价格转换
			getStep: true,
			// this.accountMessage.amount: 0, //可提现的最大金额
			// defaultAccountType: '',
            bankName: '',

            inputNumber: '', // 输入的值
            
            withdrawPramas: {
                withdrawableIntegral: 0, //可提现{{integralName}}
                withdrawRMB: 0, //抵现多少元
                eachWithdrawIntegral: 0, //每提现多少{{integralName}}
                withdrawServiceFeeRate: 0, // {{integralName}}提现费率 %， 为空或等于0时代表不收取手续费
                poundage: 0, //手续费
                cash: 0, //换算的现金
                maxIntegralWithdrawNum: 0, //单笔最大提现{{integralName}}， 为空时代表不限制
                minWithdrawIntegral: 0 // 单笔最少提现{{integralName}}， 为空时代表不限制
            },

		}
	},
	watch: {
		
	},
	mounted () {
		this.accountMessage.flag = true
		this.$store.dispatch('setAccountMessage',{...this.accountMessage, ...this.accountMessage.flag = true})
	},

	beforeRouteEnter(to, from, next) {
		next((vm) => {
            vm.$nextTick(()=> {
				to.meta.titleName = vm.$store.state.integralName + '提现'
				to.meta.title =  vm.$store.state.integralName + '提现'
				document.title = vm.$store.state.integralName + '提现'	
			})
			if (vm.accountMessage.flag) {
				(from.path ==  "/myIntegral" || from.path ==  "/" || from.path == "/withdrawalResult") && vm.getIntegralWithdraw()
			}
			
		})
	},

	

	destroyed () {
		// this.accountMessage.flag = false
	},
	
	
	computed: {
        ...mapState(['themes']),
        ...mapState(['integralName']),
		...mapState(['accountMessage'])
	},
	methods: {
		
		getIntegralWithdraw(params) {
			integralWithdraw({
			channel: 'H5',
			...params
		}).then(res =>{ 
				if( res.status == 1) {
				 	res.result =  res.result || (res.result = {})
					res.result.flag = true
					this.$store.dispatch('setAccountMessage', {...this.withdrawPramas,...res.result,})

				} else {
					this.$toast({duration: 1000,message:res.msg})
				}
			});
        },
        
        //输入框
        inputWithdrawal: debounce(function (e) {
            this.statistical(this.inputNumber)
        }, 400),


        //检查
        statistical(event, all = false) {

            const inputNumber = event ? event * 1 : ''
            const {withdrawableIntegral, withdrawRMB, eachWithdrawIntegral, withdrawServiceFeeRate, poundage, cash, maxIntegralWithdrawNum,minWithdrawIntegral} = this.accountMessage


            if (!minWithdrawIntegral && !inputNumber) {
                this.$toast(`${this.integralName}提现不能为空`)
                this.disabled = false
                this.accountMessage.poundage = 0
                this.accountMessage.cash = 0
                return true
            }

            // 单笔最小提现积分， 为空时代表不限制
            if (minWithdrawIntegral  && (inputNumber < minWithdrawIntegral)) {
                this.$toast(`最小${this.integralName}提现为${minWithdrawIntegral}`)
                this.disabled = false
                this.inputNumber = minWithdrawIntegral
                this.inputNumber == minWithdrawIntegral && this.conversion({withdrawRMB,eachWithdrawIntegral,inputNumber:this.inputNumber,withdrawServiceFeeRate})
                return true
            }

            
            // 单笔最大提现积分， 为空时代表不限制
            if (maxIntegralWithdrawNum && (inputNumber > maxIntegralWithdrawNum)) {
                this.$toast(`最大${this.integralName}提现为${maxIntegralWithdrawNum}`)
                this.disabled = false
                this.inputNumber = maxIntegralWithdrawNum

                this.inputNumber == maxIntegralWithdrawNum && this.conversion({withdrawRMB,eachWithdrawIntegral,inputNumber:this.inputNumber,withdrawServiceFeeRate})
                return true
            }

            if (!maxIntegralWithdrawNum  && (inputNumber > withdrawableIntegral)) {
                this.$toast(`最大${this.integralName}提现为${withdrawableIntegral}`)
                this.inputNumber = withdrawableIntegral
                this.inputNumber == withdrawableIntegral && this.conversion({withdrawRMB,eachWithdrawIntegral,inputNumber:this.inputNumber,withdrawServiceFeeRate})
                return true
            }

            if (all) {
                if (!maxIntegralWithdrawNum) {
                    this.inputNumber = withdrawableIntegral
                    this.conversion({withdrawRMB,eachWithdrawIntegral,inputNumber:this.inputNumber,withdrawServiceFeeRate})
                    return true
                }

                if (maxIntegralWithdrawNum && (withdrawableIntegral >= maxIntegralWithdrawNum)) {
                    this.inputNumber = maxIntegralWithdrawNum
                    this.conversion({withdrawRMB,eachWithdrawIntegral,inputNumber:this.inputNumber,withdrawServiceFeeRate})
                    return true
                }
                
            }

            all && (this.inputNumber = withdrawableIntegral)
            
            this.conversion({withdrawRMB,eachWithdrawIntegral,inputNumber: all ? withdrawableIntegral : this.inputNumber,withdrawServiceFeeRate})

        },


        //转化统计
        conversion(prames) {
            const {withdrawRMB,eachWithdrawIntegral,inputNumber,withdrawServiceFeeRate} = prames
            //兑换率
            const exchangeRate = new Decimal(withdrawRMB).div(new Decimal(eachWithdrawIntegral)).toNumber()

            this.accountMessage.poundage = withdrawServiceFeeRate ?  Math.floor( new Decimal(inputNumber).mul(new Decimal(withdrawServiceFeeRate).div(100)).toNumber()): 0
            const cashs =  Math.floor( new Decimal(inputNumber).sub(new Decimal(this.accountMessage.poundage)).toNumber())
            this.accountMessage.cash = new Decimal(cashs).mul(new Decimal(exchangeRate)).toNumber()
            this.disabled = true
        },
		
		//全部提现
		allGet() {
			this.statistical(this.accountMessage.withdrawableIntegral, true)
		},

		//确认提现
		applyWithward() {
			if (!this.disabled) {
			    return
			}
			
			if(this.accountMessage.cash < 1){
			    this.$toast(`兑现金额不能小于1元`)
			    return
			}
			if (!this.accountMessage.defaultAccountType) {
				this.$toast('请去选择到账类型方式')
				return
			}
			
			this.$utils.uDebounce(() => {
				let that = this
				this.$toast.loading({mask: true,forbidClick: true, message: '提现中...'});//防连续点击
				let props = {
				    integral: this.inputNumber,
				    receiverAccountType: this.accountMessage.defaultAccountType,
				    channel: 'H5'
				}
				
				if (this.accountMessage.defaultAccountType != 'WECHAT_WALLET') {
				   props.bankCardId = this.accountMessage.bankCardId
				}
				
				submitWithdrawApply(props).then(res => {
					if (res.status == 1) {
						
						that.$toast.clear();
				
						
						that.$router.push({
							path: "/withdrawalResult",
							query: {
				                withdrawSn: res.result,
				                source: 'integral',
							}
						});
						this.$store.dispatch('setAccountMessage',{...this.accountMessage, ...this.accountMessage.flag = true})	
						
					} else {
						that.$toast(res.msg);
					}
				}).catch(e => {
					that.$toast.clear();
				});
			})
            
		},
		
		goWithdrawProblem() {
		    this.$router.push({
				path: `/withdrawProblem`,
			});
		},
		//提醒记录
        goextensionWithdraw() {
		    this.$router.push({
				path: `/myExtension/extensionWithdraw`,
			});
		},
		//添加银行卡
		
		goChooseAccount() {
			

			let props = {
                path: '/chooseAccount',
                query: {
                    source: 'integral'
                }
			}

			let params = null


			if (this.accountMessage.bankCardId) {

				 params = {
					query: {
                        bankCardId: this.accountMessage.bankCardId,
                        source: 'integral'
					}
				}
				params = {...props, ...params}

			}

	
			if (this.accountMessage.defaultAccountType == 'WECHAT_WALLET') {
				 params =  {
					query: {
                        defaultAccountType: this.accountMessage.defaultAccountType,
                        source: 'integral'
					}
					
				}
				params = {...props, ...params}
			}


			this.$router.push(params ? params : props);
		},
		backPage() {
			this.$router.back();
      		this.$router.isBack = true;
		},
		
	},
	
}
</script>

<style src="@/assets/css/style/my-style.css" scoped></style>
<style src="@/assets/css/pre-deposit.css" scoped></style>
<style scoped>
.p{
	color: #4eae31;
	text-align: center;
	font-size: small;
	margin-top: 8px
}


/* 提现 */
.withdraw .withdraw-con {
  /* padding: 15px 10px 10px; */
  background: #ffffff;
}


/* end 提现 */

/* 提现结果 */
.withdraw .withdraw-result {
  padding: 5px 10px 10px;
  background: #ffffff;
}
.withdraw .withdraw-result .process {
  color: #999999;
  font-size: 14px;
  line-height: 24px;
  margin-bottom: 5px;
  padding: 10px 0;
  border-bottom: 1px dashed #dddddd;
}
/* end 提现结果 */



.arriveAccount {
	width: 100%;
	margin-bottom: 10px;
	background-color: rgb(250, 250, 250);
	padding: 0 10px;
}
.arriveAccount .arrive-top {
  display: flex;
}
.arriveAccount .arrive-top .arrive-top-left,
.arriveAccount .arrive-top .arrive-top-right {
  font-size: 0.28rem;
  padding: 15px 0 15px 0;
}

.arriveAccount .arrive-top .arrive-top-right {
  margin-left: auto;
}

.arriveAccount .arrive-top .arrive-top-right .arr {
  display: inline-block;
  vertical-align: middle;
  width: 0.16rem;
  height: 0.16rem;
  margin-top: -0.04rem;
  margin-left: 0.15rem;
  margin-right: 0.22rem;

}
.arriveAccount .arrive-top .arrive-top-right .arr img {
  width: 100%;
  height: 100%;
  display: inline-block;
  vertical-align: top;
}

.arrive-bottom {
  font-size: 0.24rem;
  color: #999999;
}


.arrive-bottom {
  padding: 0 0.30rem 0.20rem 0;
}


.tips-cont {
  text-align: center;
  font-size: 0.24rem;
  color: rgb(91, 161, 234);
}

.tips-cont .text {
  margin:  0 0.15rem;
}

.tips-cont .spacer {
  overflow: hidden;
  margin: 11px 5px 0;
  width: 1px;
  height: 10px;
  background-color: #ccc;
  display: inline-block;
}


.integral-content {
    background: #fff;
    padding: 0 10px;
}

.integral-content .item {
    display: flex;
    align-items: center;
    padding-top: 10px;
    box-sizing: border-box;
}

.integral-content .item:last-child {
    padding-bottom: 10px;
}

.integral-content .item .entry-name {
    width: 75px;
    height: 20px;
    line-height: 20px;
    max-width: 75px;
    font-size: 14px;
    margin-right: 20px;
}
 
.integral-content .item .entry-txt {
    font-size: 18px;
    font-weight: bold;
    color: rgba(255, 141, 26, 1);
}

.integral-content .item .input-box {
    display: flex;
    align-items: center;
}

.integral-content .item .entry-content {
    width: 100%;
    flex: 1;
}

.integral-content .item .input-box {
    padding-bottom: 10px;
    border-bottom: 1px solid #f8f8f8;
    margin-top: 10px;
}

/* .integral-content .item .input-box::after {
    content: '';
    display: block;
    border-bottom: 2px solid rgba(236, 236, 236, 1);
} */

.integral-content .item .input-box .input-text {
    font-size: 14px;
    flex: 1;
}

.integral-content .item .input-box .text-all {
    color: rgba(42, 130, 228, 1);
    font-size: 14px;
    text-align: right;
}


.integral-content .item .desc-content {
    width: 100%;
    text-indent: 93px; 
}

.integral-content .item .desc-content .desc-item {
    font-size: 14px;
    color: rgba(255, 141, 26, 1);
    margin-top: 5px;

}

.integral-content .item .desc-content .desc-item:last-child{
    margin-bottom: 5px;
}

.integral-content .item .entry-span {
    font-size: 14px;
}

</style>
